---
import LayoutMain from "@layouts/LayoutMain.astro";
import LayoutMainBottom from "@layouts/LayoutMainBottom.astro";
import LayoutMainBottomLeft from "@layouts/LayoutMainBottomLeft.astro";
import LayoutMainBottomRight from "@layouts/LayoutMainBottomRight.astro";
import LayoutMainTop from "@layouts/LayoutMainTop.astro";
import AsideToc from "../common/aside/AsideToc.astro";
import AsideNotice from "../common/aside/AsideNotice.astro";
import AsideAuthor from "../common/aside/AsideAuthor.astro";
import AsideComment from "../common/aside/AsideComment.astro";
import AsideWebInfo from "../common/aside/AsideWebInfo.astro";
import AsideHotTag from "../common/aside/AsideHotTag.astro";
import CommonTop from "@components/common/CommonTop.astro";
import AsideArticleList from "../common/aside/AsideArticleList.astro";
import LayoutFooter from "@layouts/LayoutFooter.astro";
import CommonFooter from "@components/common/CommonFooter.astro";
import ArticleContent from "./ArticleContent.astro";
import ArticleCopyright from "./ArticleCopyright.astro";
import ArticleNp from "./ArticleNp.astro";
import ArticleRelated from "./ArticleRelated.astro";
import AsideAutoHold from "@components/common/aside/AsideAutoHold.astro";
import ArticleTool from "@components/article/ArticleTool.astro";
import ArticleComment from "./ArticleComment.astro";
---
<LayoutMain>
  <LayoutMainTop>
    <th:block
      th:if="${article!=null}"
      th:with="imgs=${@commonTag.split(article.articleImg==null?'':article.articleImg)},
      rando=${#numbers.formatDecimal(T(java.lang.Math).floor(T(java.lang.Math).random()*10),1,0)},iul=@{/nice/static/images/thumbs/},
      bg=${(imgs==null)?iul+rando+'.jpg':imgs[0]}"
    >
      <CommonTop bgImg="${bg}">
        <div
          class="absolute w-full top-[120px] left-0 h-auto text-center text-white"
        >
          <div class="mb-6 flex gap-2 justify-center flex-wrap">
            <th:block th:each="category:${article.mapCategory['classify']}">
              <div
                class="rounded-md px-2 py-1 text-xs font-semibold bg-lime-400 text-nowrap text-lime-900"
              >
                <a
                  th:href="${webConfig['oly.web.domain']+'/category/'+category.categoryId}"
                  th:title="${category.categoryName}"
                  th:text="${category.categoryName}">分类</a
                >
              </div>
            </th:block>
            <th:block th:each="tag:${article.mapCategory['tag']}">
              <div
                class="rounded-md px-2 py-1 text-xs font-semibold bg-fuchsia-400 text-nowrap text-fuchsia-900"
              >
                <a
                  th:href="${webConfig['oly.web.domain']+'/category/'+tag.categoryId}"
                  th:title="${tag.categoryName}"
                  th:text="${tag.categoryName}">标签</a
                >
              </div>
            </th:block>
          </div>
          <div class="max-w-[800px] mx-auto overflow-hidden max-h-[90px]">
            <h1 class="text-[30px]" th:text="${article.articleTitle}"></h1>
            <p
              class="mb-4 text-lg text-gray-600 dark:text-gray-400"
              th:text="${article.articleSummary}"
            >
              介绍
            </p>
          </div>
           <div class="mt-4 flex gap-2 flex-wrap justify-center"> 
           
            <div class="flex flex-nowrap">
              <svg
                class="w-6 h-6 text-gray-800 dark:text-white"
                aria-hidden="true"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                fill="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  fill-rule="evenodd"
                  d="M14 4.182A4.136 4.136 0 0 1 16.9 3c1.087 0 2.13.425 2.899 1.182A4.01 4.01 0 0 1 21 7.037c0 1.068-.43 2.092-1.194 2.849L18.5 11.214l-5.8-5.71 1.287-1.31.012-.012Zm-2.717 2.763L6.186 12.13l2.175 2.141 5.063-5.218-2.141-2.108Zm-6.25 6.886-1.98 5.849a.992.992 0 0 0 .245 1.026 1.03 1.03 0 0 0 1.043.242L10.282 19l-5.25-5.168Zm6.954 4.01 5.096-5.186-2.218-2.183-5.063 5.218 2.185 2.15Z"
                  clip-rule="evenodd"></path>
              </svg>

              <span th:text="${article.createUser.nickName}"> </span>
            </div>
            <div class="flex flex-nowrap">
              <svg
                class="w-6 h-6 text-gray-800 dark:text-white"
                aria-hidden="true"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                fill="none"
                viewBox="0 0 24 24"
              >
                <path
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M4 10h16m-8-3V4M7 7V4m10 3V4M5 20h14a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1Zm3-7h.01v.01H8V13Zm4 0h.01v.01H12V13Zm4 0h.01v.01H16V13Zm-8 4h.01v.01H8V17Zm4 0h.01v.01H12V17Zm4 0h.01v.01H16V17Z"
                ></path>
              </svg>
              <time
                th:text="${#dates.format(article.createTime, 'yyyy/MM/dd/HH')}"
              >
              </time>
            </div>
  
          <th:block th:if="${article.articleCount != null}">
            <div class="flex flex-nowrap">
              <svg
                class="w-6 h-6 text-gray-800 dark:text-white"
                aria-hidden="true"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                fill="none"
                viewBox="0 0 24 24"
              >
                <path
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M16 10.5h.01m-4.01 0h.01M8 10.5h.01M5 5h14a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1h-6.6a1 1 0 0 0-.69.275l-2.866 2.723A.5.5 0 0 1 8 18.635V17a1 1 0 0 0-1-1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z"
                ></path>
              </svg>

              <span th:text="${article.articleCount?.recordDiscuss}"> </span>
            </div>

            <div class="flex flex-nowrap">
              <svg
                class="w-6 h-6 text-gray-800 dark:text-white"
                aria-hidden="true"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                fill="none"
                viewBox="0 0 24 24"
              >
                <path
                  stroke="currentColor"
                  stroke-width="2"
                  d="M21 12c0 1.2-4.03 6-9 6s-9-4.8-9-6c0-1.2 4.03-6 9-6s9 4.8 9 6Z"
                ></path>
                <path
                  stroke="currentColor"
                  stroke-width="2"
                  d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"></path>
              </svg>
              <span th:text="${article.articleCount?.recordLook}"> </span>
            </div>
          </th:block>
          <div class="flex flex-nowrap">
            <svg
              class="w-6 h-6 text-gray-800 dark:text-white"
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              fill="none"
              viewBox="0 0 24 24"
            >
              <path
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M12 6.03v13m0-13c-2.819-.831-4.715-1.076-8.029-1.023A.99.99 0 0 0 3 6v11c0 .563.466 1.014 1.03 1.007 3.122-.043 5.018.212 7.97 1.023m0-13c2.819-.831 4.715-1.076 8.029-1.023A.99.99 0 0 1 21 6v11c0 .563-.466 1.014-1.03 1.007-3.122-.043-5.018.212-7.97 1.023"
              ></path>
            </svg>
            <span id="wordCount"> </span>
          </div>
          <div class="flex flex-nowrap">
            <svg
              class="w-6 h-6 text-gray-800 dark:text-white"
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              fill="none"
              viewBox="0 0 24 24"
            >
              <path
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M9.5 11H5a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h4.5M7 11V7a3 3 0 0 1 6 0v1.5m2.5 5.5v1.5l1 1m3.5-1a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Z"
              ></path>
            </svg>
            <span id="reardWordTime"> </span>
          </div>
          </div>
          <input id="articleId" type="hidden" th:value="${article.articleId}" />
        </div>
      </CommonTop>
    </th:block>
  </LayoutMainTop>
  <th:block
    th:unless="${article!=null}"
    th:with="bgUrl=${'/nice/static/images/thumbs/'+#numbers.formatDecimal(T(java.lang.Math).floor(T(java.lang.Math).random()*10),1,0)+'.jpg'}"
  >
    <CommonTop bgImg="${bgUrl}">
      <div class="grid grid-cols-6 gap-4">
        <div class="col-start-2 col-span-4 text-center z-10">
          <h1
            class="inline-block mb-2 text-3xl font-extrabold tracking-tight mt-36 text-gray-900 dark:text-white"
          >
            没有找到任何数据！
          </h1>
          <p class="mb-4 text-lg text-gray-600 dark:text-gray-400">
            请联系管理员或者稍后重试!
          </p>
        </div>
      </div>
    </CommonTop>
  </th:block>
</LayoutMain>
<LayoutMainBottom>
  <LayoutMainBottomLeft>
    <ArticleContent />
    <th:block th:if="${article!= null}">
      <div id="article-about">
      <ArticleCopyright />
      <ArticleComment />
      <ArticleNp />
      <ArticleRelated />
      </div>
    </th:block>
  </LayoutMainBottomLeft>
  <LayoutMainBottomRight>
    <AsideAuthor />
    <AsideAutoHold targetId="article-content">
      <AsideToc />

      <AsideComment />

      <AsideNotice />

      <AsideHotTag />
      </AsideAutoHold>
      <AsideAutoHold targetId="article-about">
      <AsideArticleList />

      <AsideWebInfo />
    </AsideAutoHold>
  </LayoutMainBottomRight>
</LayoutMainBottom>
<ArticleTool />
<LayoutFooter>
  <CommonFooter />
</LayoutFooter>
